import React, { useState, useEffect } from "react";
import {
  Tabs,
  Form,
  Row,
  Col,
  Select,
  Input,
  Radio,
  Switch,
  DatePicker,
  Table,
  Button,
} from "antd";
import moment from "moment";
import city from "../../../../../utils/city";
import "antd/dist/antd.css";
import "./tabs.scss";

const { TabPane } = Tabs;
const { RangePicker } = DatePicker;
// const { Search } = Input;

function callback(key) {}

const onFinish = (values) => {
  console.log(values);
};

const validateMessages = {
  required: "${label} is required!",
  types: {
    email: "${label} is not a valid email!",
    number: "${label} is not a valid number!",
  },
  number: {
    range: "${label} must be between ${min} and ${max}",
  },
};

// 表格数据

export default function Tab(props) {
  const {
    chinaCity,
    alOrganization,
    allSingleSet,
    onfirstFormSubmit,
    onsecondFormSubmit,
  } = props;
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [form] = Form.useForm();
  const { getFieldDecorator } = form;
  useEffect(() => {}, []);

  let selectOption = (props) => {
    setSelectedRowKeys(props);
  };

  function onSelectChange(selectedRowKeys) {
    setSelectedRowKeys(selectedRowKeys);
    selectOption(selectedRowKeys);
  }

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };

  const dateFormat = "YYYY-MM-DD";

  let resetFile = () => {
    form.resetFields();
  };

  let onFinish = (values) => {
    // console.log(111, values);
    onfirstFormSubmit(values);
  };

  // 表格标题
  const columns = [
    {
      title: "项目名称",
      dataIndex: "phy_projectName",
    },
    {
      title: "检查范围",
      dataIndex: "phy_suitRange",
    },
    {
      title: "检查意义",
      dataIndex: "phy_checkMean",
    },
    {
      title: "适用标签",
      dataIndex: "phy_suitTag",
    },
    {
      title: "原价",
      dataIndex: "phy_oldPrice",
    },
    {
      title: "售价",
      dataIndex: "phy_salePrice",
    },
  ];

  return (
    <Tabs defaultActiveKey='1' onChange={callback}>
      <TabPane tab='基本信息' key='1'>
        <Form
          name='addSetForm'
          validateMessages={validateMessages}
          onFinish={onFinish}
        >
          <Row gutter={24}>
            {/* 套餐名称 */}
            <Col
              className='colStyle'
              xl={{ span: 12 }}
              md={{ span: 8 }}
              sm={{ span: 12 }}
              xs={{ span: 24 }}
            >
              <Form.Item
                name={["user", "com_proName"]}
                label='套餐名称'
                rules={[
                  {
                    required: true,
                    message: "Please input your name",
                  },
                ]}
              >
                <Input />
              </Form.Item>
            </Col>
            {/* 套餐ID */}
            <Col
              className='colStyle'
              xl={{ span: 12 }}
              md={{ span: 8 }}
              sm={{ span: 12 }}
              xs={{ span: 24 }}
            >
              <Form.Item
                name={["user", "com_UID"]}
                label='套餐ID'
                rules={[
                  {
                    required: true,
                    message: "Please input your name",
                  },
                ]}
              >
                <Input />
              </Form.Item>
            </Col>
            {/* 原价 */}
            <Col
              className='colStyle'
              xl={{ span: 12 }}
              md={{ span: 8 }}
              sm={{ span: 12 }}
              xs={{ span: 24 }}
            >
              <Form.Item
                name={["user", "com_originalPrice"]}
                label='原价'
                rules={[
                  {
                    required: true,
                    message: "Please input your name",
                  },
                ]}
              >
                <Input />
              </Form.Item>
            </Col>{" "}
            {/* 售价 */}
            <Col
              className='colStyle'
              xl={{ span: 12 }}
              md={{ span: 8 }}
              sm={{ span: 12 }}
              xs={{ span: 24 }}
            >
              <Form.Item
                name={["user", "com_presentPrice"]}
                label='售价'
                rules={[
                  {
                    required: true,
                    message: "Please input your name",
                  },
                ]}
              >
                <Input />
              </Form.Item>
            </Col>
            {/* 有效时间截止 */}
            <Col
              className='colStyle'
              xl={{ span: 12 }}
              md={{ span: 8 }}
              sm={{ span: 12 }}
              xs={{ span: 24 }}
            >
              <Form.Item
                name={["user", "createTime"]}
                label='有效时间'
                rules={[
                  {
                    required: true,
                    message: "Please pick an item!",
                  },
                ]}
              >
                <RangePicker
                  style={{ width: "100%" }}
                  defaultValue={[
                    moment("2015-06-06", dateFormat),
                    moment("2015-06-06", dateFormat),
                  ]}
                />
              </Form.Item>
            </Col>
            {/* 适用地区 */}
            <Col
              className='colStyle'
              xl={{ span: 12 }}
              md={{ span: 8 }}
              sm={{ span: 12 }}
              xs={{ span: 24 }}
            >
              <Form.Item
                name={["user", "com_address"]}
                label='适用城市'
                rules={[
                  {
                    required: true,
                    message: "Please input your name",
                  },
                ]}
              >
                <Select placeholder='请选择城市'>
                  {chinaCity.map((item, index) => (
                    <Select.Option key={index} value={item.cityName}>
                      {item.cityName}
                    </Select.Option>
                  ))}
                </Select>
              </Form.Item>
            </Col>
            {/* 适用标签 */}
            <Col
              className='colStyle'
              xl={{ span: 24 }}
              md={{ span: 8 }}
              sm={{ span: 12 }}
              xs={{ span: 24 }}
            >
              <Form.Item
                name={["user", "com_label"]}
                label='适用标签'
                rules={[
                  {
                    required: true,
                    message: "Please pick an item!",
                  },
                ]}
              >
                <Radio.Group>
                  <Radio.Button value='男性套餐'>男性套餐</Radio.Button>
                  <Radio.Button value='女性套餐'>女性套餐</Radio.Button>
                  <Radio.Button value='老人套餐'>老人套餐</Radio.Button>
                  <Radio.Button value='入职体检'>入职体检</Radio.Button>
                </Radio.Group>
              </Form.Item>
            </Col>
            {/* 适用机构 */}
            <Col
              className='colStyle'
              xl={{ span: 6 }}
              md={{ span: 8 }}
              sm={{ span: 12 }}
              xs={{ span: 24 }}
            >
              <Form.Item
                name={["user", "org_name"]}
                label='适用机构'
                rules={[
                  {
                    required: true,
                    message: "Please input your name",
                  },
                ]}
              >
                <Select>
                  {alOrganization.map((item, index) => (
                    <Select.Option key={index} value={item.org_name}>
                      {item.org_name}
                    </Select.Option>
                  ))}
                </Select>
              </Form.Item>
            </Col>
            {/* 是否启用 */}
            <Col
              className='colStyle'
              xl={{ span: 12 }}
              md={{ span: 8 }}
              sm={{ span: 12 }}
              xs={{ span: 24 }}
            >
              <Form.Item
                name={["user", "com_status"]}
                label='是否启用'
                valuePropName='checked'
                rules={[
                  {
                    required: true,
                    message: "Please pick an item!",
                  },
                ]}
              >
                <Switch />
              </Form.Item>
            </Col>
            {/* 套餐介绍 */}
            <Col
              className='colStyle'
              xl={{ span: 24 }}
              md={{ span: 24 }}
              sm={{ span: 24 }}
              xs={{ span: 24 }}
            >
              <Form.Item
                name={["user", "com_introduce"]}
                label='套餐介绍'
                rules={[
                  {
                    required: true,
                    message: "Please input your name",
                  },
                ]}
              >
                <Input.TextArea autoSize={{ minRows: 2, maxRows: 12 }} />
              </Form.Item>
            </Col>
            {/* 使用规则 */}
            <Col
              className='colStyle'
              xl={{ span: 24 }}
              md={{ span: 24 }}
              sm={{ span: 24 }}
              xs={{ span: 24 }}
            >
              <Form.Item
                name={["user", "com_rules"]}
                label='使用规则'
                rules={[
                  {
                    required: true,
                    message: "Please input your name",
                  },
                ]}
              >
                <Input.TextArea autoSize={{ minRows: 2, maxRows: 12 }} />
              </Form.Item>
            </Col>
            <Col
              className='colStyle'
              xl={{ span: 24 }}
              md={{ span: 24 }}
              sm={{ span: 24 }}
              xs={{ span: 24 }}
            >
              <Row type='flex' align='middle' justify='center'>
                <div>
                  <Button
                    type='primary'
                    htmlType='submit'
                    style={{ marginRight: "15px" }}
                  >
                    确定
                  </Button>
                  {/* onClick={context.addA(10)} */}
                  <Button type='ghost' onClick={resetFile}>
                    重置
                  </Button>
                </div>
              </Row>
            </Col>
            {/* 套餐组成 */}
            {/* <Col
              className='colStyle'
              xl={{ span: 24 }}
              md={{ span: 24 }}
              sm={{ span: 24 }}
              xs={{ span: 24 }}
            >
              <Form.Item
                name={["user", "phy_id"]}
                label='套餐组成'
                rules={[
                  {
                    required: true,
                    message: "Please input your name",
                  },
                ]}
              >
                <Input.TextArea autoSize={{ minRows: 2, maxRows: 12 }} />
              </Form.Item>
            </Col> */}
          </Row>
        </Form>
      </TabPane>
      <TabPane tab='套餐组成' key='2'>
        <Table
          rowSelection={rowSelection}
          columns={columns}
          rowKey='phy_id'
          dataSource={allSingleSet}
        />
        <Col
          className='colStyle'
          xl={{ span: 24 }}
          md={{ span: 24 }}
          sm={{ span: 24 }}
          xs={{ span: 24 }}
        >
          <Row type='flex' align='middle' justify='center'>
            <div>
              <Button
                type='primary'
                htmlType='button'
                onClick={() => {
                  onsecondFormSubmit(selectedRowKeys);
                }}
                style={{ marginRight: "15px" }}
              >
                确定
              </Button>
              <Button
                type='ghost'
                onClick={() => {
                  setSelectedRowKeys([]);
                }}
              >
                重置
              </Button>
            </div>
          </Row>
        </Col>
      </TabPane>
    </Tabs>
  );
}
